iT邦幫忙

2023 iThome 鐵人賽

DAY 7
1

我們先前已經寫了取得文章的API,今天我們要開發新增文章的API。
回顧一下我們的API設計:
https://ithelp.ithome.com.tw/upload/images/20230921/20136558Tt2oJJQIBk.png

大綱

  1. 部落格文章API開發
  2. 使用Postman測試API

1.部落格文章API開發

目前的posts-routes.js

const express = require('express');
const router = express.Router();
const postController =  require('../controllers/posts-controller');

//@router POST /api/posts
//@desc 新增文章.
//@access Public
router.post("/", (req,res,next)=>{
    res.json({message: 'It works!'});
});

//@router  GET api/posts/:postId
//@desc 取得文章資訊(單一).
//@access Public
router.get("/:postId",postController.getPost);

//@router PUT /api/posts/:postId
//@desc 編輯文章
//@access Public
router.put("/:postId", (req,res,next)=>{
    res.json({message: 'It works!'});
});

//@router DELETE api/posts
//@desc 刪除文章
//@access Public*/
router.delete("/:postId", (req,res,next)=>{
    res.json({message: 'It works!'});
});

module.exports =  router;

我們先接著開發新增文章,在posts-controller.js內新增createPost

//posts-controller.js

const MOCK_POSTS = [...]
const getPost = {...}

//建立文章
const createPost =  (req,res,next)=>{
    const { title , tags, content , authorId} = req.body;
    
    const createdPlace = {
        title,
        tags,
        content,
    };
    
    MOCK_POSTS.push(createdPlace);
    res.status(201).json({place:createdPlace});
}

exports.getPost = getPost;
exports.createPost = createPost;

之後回到posts-route.js在新增文章的route裡面使用createPost

const express = require("express");
const router = express.Router();
const postControllers = require("../../controllers/posts-controller");

//@router POST /api/posts
//@desc 新增文章
//@access Public
router.post("/", postControllers.createPost);

//@router  GET api/posts/:postId
//@desc 取得文章資訊(單一)
//@access Public
router.get("/:postId",postControllers.getPost);

新增body-parser

還記得我們在一開始就安裝了body-parser,他是用來解析req.body的中介軟體(middleware)
body-parser

在以前的 Express 版本中,使用 body-parser 中介軟體是必需的,因為 Express 本身不含用於解析 HTTP 請求主體的功能。然而,自 Express 4.16.0 版本開始,它已經內置了用於解析請求主體的功能,而不再需要單獨安裝和使用 body-parser。

const app = express();
// Express 4.16.0 版本後,無需使用 body-parser 
app.use(express.json()); // 解析 JSON 主體

//但因為我目前使用的還是舊版本,所以繼續使用body-parser。


//server.js

const express = require('express');
const app = express();
const port = 5000;
const postRoutes = require('./routes/posts-routes');
const bodyParser = require('body-parser');

app.use(bodyParser.json()); // 解析 JSON 

app.use('/api/posts',postRoutes);

app.use((err, req, res, next) => {
  //檢查是否已經向客戶端發送了HTTP header,如果已經發送了,表示已經無法再修改狀態碼和header
 if (res.headersSent) {
     return next(err);
 }
 //將錯誤的堆疊訊息(stack trace)輸出到控制台,方便進行除錯
 console.error(err.stack);
 
 res.status(err.status || 500);
 
 res.json({
     error: {
         message: err.message  || 'Internal Server Error'
     }
 });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
}); 

此時我們無法透過瀏覽器去測試新增文章的api,因為當我們在瀏覽器輸入URL時他只會呼叫GET方法,

這時就需要用Postman來協助我們測試Post。

2.使用Postman測試API

Postman 介紹

https://ithelp.ithome.com.tw/upload/images/20230921/20136558swXrbSXNoG.jpg

Postman是一個流行的API開發工具,用於測試、驗證和設計RESTful API。它為開發人員提供了一個直觀的使用者界面,可以輕鬆地建立、發送和處理HTTP請求,以測試API端點的功能。

註冊好之後,進入到這個頁面,請看以下操作
https://i.imgur.com/I54l7BT.gif

我們當然也可以在上面測試getAPI
https://ithelp.ithome.com.tw/upload/images/20230922/20136558JKXAkT2Zzf.jpg

結語

目前為止都是使用假資料,之後就會進入真實資料庫MongoDB了
/images/emoticon/emoticon13.gif

參考資料

https://expressjs.com/en/resources/middleware/body-parser.html
https://www.postman.com/


上一篇
[Day6] 使用MVC架構:建立Controller和ErrorModel
下一篇
[Day8] 文章更新和刪除API開發
系列文
初探全端之旅: 以MERN技術建立個人部落格31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言